<template>
	<div class="recobox">
		 <h1 class="bluetit titfont">文件推荐</h1>
		 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
			 <el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="姓名" prop="name">
					    <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
				    <el-form-item label="电话" prop="mobile">
					    <el-input v-model="ruleForm.mobile" placeholder="请输入电话号码"></el-input>
					 </el-form-item>
				</el-col>
				<el-col :span="8">
				    <el-form-item label="邮箱" prop="email">
					    <el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<p>推荐内容</p>
			<el-form-item label="内容" prop="content">
				<el-input  v-model="ruleForm.content" type="textarea" :rows="7" placeholder="请输入内容"></el-input>
			</el-form-item>
			<el-form-item>
			    <el-button class="bluebtn" @click="submit('ruleForm')">提交</el-button>
			 </el-form-item>
		</el-form>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		name:'RecoMain',
		data(){
			return{
				ruleForm: {
		          name: '',
		          mobile: '',
		          email: '',
		          content: ''
		        },
		        rules: {
		          name: [
		            { required: true, message: '请输入姓名', trigger: 'blur' },
		            { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
		          ],
		          mobile:[
		            { required: true, message: '请输入电话号码', trigger: 'blur' },
		            { len: 11, message: '请输入正确的手机号码', trigger: 'blur' }
		          ],
		          email:[
		           	{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
      				{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
		          ],
		          content:[
		            { required: true, message: '请输入内容', trigger: 'blur' },

		          ]
		          
		        }
			}
		},
		methods:{
			submit(formName) {
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
			        let contact_name = this.ruleForm.name;
	                let contact_mobile = this.ruleForm.mobile;
	                let contact_email = this.ruleForm.email;
	                let content = this.ruleForm.content;

	                axios.post('/fileRecommend/submit',{
	                	contact_name,
	                  	contact_mobile,
	                  	contact_email,
	                  	content
	                }).then((res)=>{
	                    res = res.data
	                  if (res.status==200) {
	                  	this.$refs.ruleForm.resetFields()
	                  	this.$message({
	                  	  dangerouslyUseHTMLString: true,
				          message: '提交成功！',
				          center:true,
				          offset:300,
				          duration:1000,
				          type: 'success'
				        })	                               	              
	                  }            
	                });
		          } else {
		            console.log('error submit!!');
		            return false;
		          }
		        });
		     }
		}

	}
</script>

<style scoped>
	.recobox{
		font-weight: 300;
	}
	
</style>